<template>
  <div id="app">

    <!-- 头部 -->
    <div style="height: 60px; line-height: 60px; background-color: white; width: 100%;">
      <div style="position: relative; top: 10px; left: 20px; width: 40px; float: left">
        <svg t="1669196297795" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4077" width="40" height="40">
          <path
              d="M511.981761 1024a811.427093 811.427093 0 0 0-511.981761-176.249721V300.825763a811.427093 811.427093 0 0 1 511.981761 176.249721A811.491091 811.491091 0 0 1 1023.963521 300.825763v546.924516A811.491091 811.491091 0 0 0 511.981761 1024z m415.98518-621.161871a704.614898 704.614898 0 0 0-355.507335 148.794699L511.981761 600.687081l-60.477846-49.054253A704.486903 704.486903 0 0 0 95.99658 402.838129v353.747398a908.767625 908.767625 0 0 1 415.985181 148.122723 908.767625 908.767625 0 0 1 415.98518-148.122723V402.838129zM511.469779 298.361851a149.178686 149.178686 0 1 1 149.146687-149.178686 149.306681 149.306681 0 0 1-149.146687 149.178686z"
              fill="#0590DF" p-id="4078"></path>
        </svg>
      </div>

      <div style="margin-left: 70px;">
        <span style="font-size: 24px"> 图书管理系统</span>
        <!--        右上角个人信息下拉列表-->
        <div style="float: right; margin-right: 30px">
          <el-dropdown :hide-on-click="false" size="medium">
            <span class="el-dropdown-link" style="cursor: pointer">
              {{ admin.username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center;">

              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <span style="text-decoration: none; color: black" @click="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>

          </el-dropdown>
        </div>
      </div>

    </div>


    <!-- 侧边栏-->
    <div style="display: flex; width: 100%">
      <!--      侧边栏-->
      <div style="width: 200px;  margin-right: 3px; background-color: white; min-height: calc(100vh - 66px)">

        <el-menu :default-active="$router.push"
                 router
                 class="el-menu-vertical-demo"
                 @select="handleSelect">
          <el-menu-item index="/manage/home"> <i class="el-icon-s-data"></i>首页</el-menu-item>
          <el-submenu index="1" style="width: 200px">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </template>

            <!--            -->
            <el-menu-item-group>
              <el-menu-item index="user">用户列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>管理员管理</span>
            </template>

            <el-menu-item-group>
              <el-menu-item index="admin">会员列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>


          <!---->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-collection-tag"></i>
              <span>分类管理</span>
            </template>

            <el-menu-item-group>
              <el-menu-item index="category">图书分类</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!---->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-reading"></i>
              <span>图书管理</span>
            </template>

            <el-menu-item-group>
              <el-menu-item index="book">图书列表</el-menu-item>
            </el-menu-item-group>

            <el-menu-item-group>
              <el-menu-item index="newspaper">杂志列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <!---->
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>管理列表</span>
            </template>

            <el-menu-item-group>
              <el-menu-item index="borrow">借阅列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="returnBook">还书列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="activity">活动管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>

      <!--      主体-->

      <div style="flex: 1; padding: 10px; background-color: white; width: 100%">
        <div>
          <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
            <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div style="margin-top: 20px">
          <router-view/>
        </div>
      </div>
    </div>


  </div>

</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "manage.vue",
  data() {
    return {
      admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {}
    }
  },
  methods: {
    handleSelect(index) {
      this.$route.fullPath.split('/')
    },
    logout() {
      Cookies.remove('admin');
      this.$router.push("/login");
      this.$message.success("退出成功")
    }
  },
  computed: {
    currentPathName() {
      return this.$store.state.currentPathName;　　//需要监听的数据
    }
  },
  watch: {
    currentPathName(newVal, oldVal) {
      console.log(newVal)
    }
  },
  // 登出

}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: black;
}

</style>